<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
        2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
        3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。-->

    <div id="app">
        <button v-on:click="counter += 1">
            增加1
        </button>
        <p>这个按钮被点击了{{counter}}</p>
    </div>


    <div id="app1">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button>
    </div>

    <div id="app2">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
    </div>

    <div id="app3">
        <!--事件修饰符-->

        <!-- 阻止单击事件冒泡  因为事件源本身（可能）并没有处理事件的能力，
        即处理事件的函数（方法）并未绑定在该事件源上-->
        <!--<a v-on:click="doThis">doThis</a>-->
        <a v-on:click.stop="doThis">doThis</a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit">
            <a href="">doThat</a>
        </form>
        <!-- 修饰符可以串联  -->
        <a v-on:click.stop.prevent="doThat">onSubmit</a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件侦听器时使用事件捕获模式 -->
        <div v-on:click.capture="doThis">...</div>
        <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
        <div v-on:click.self="doThat">...</div>

        <!-- click 事件只能点击一次，2.1.4版本新增 -->
        <a v-on:click.once="doThis"></a>

        <!--按键修饰符-->
        <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
        <input v-on:keyup.13="submit">

        <!--最常用的按键提供了别名-->
        <!-- 同上 -->
        <input v-on:keyup.enter="submit">
        <!-- 缩写语法 -->
        <input @keyup.enter="submit">
    </div>


    <div id="app4">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="name1">Greet</button>
    </div>


    <div id="app5">
        <button v-on:click="say('hi',$event)">say hi</button>
    </div>



    <div id="app6">
        <input type="button"
               value="单击后增加"
               @click="m +=1"
        >

        <input type="button"
               value="绑定函数的按钮"
               @click="add"
        >

        <input type="button"
               value="绑定可传值函数的按钮"
               @click="add2(3,4)"
        >

        <div>这个按钮被点击了 {{ m }} 。</div>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        <!--事件监听可以使用 v-on 指令-->
        var app = new Vue({
            el:"#app",
            data:{
                counter:0
            }
        });
        /*需要使用一个方法来调用 JavaScript 方法。
        v-on 可以接收一个定义的方法来调用。*/
        var app1 = new Vue({
            el: '#app1',
            data: {
                name: 'Vue.js'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function (event) {
                    // `this` 在方法里指当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })
        // 也可以用 JavaScript 直接调用方法
        // app1.greet() // -> 'Hello Vue.js!'

        //直接绑定到一个方法，也可以用内联 JavaScript 语句
        var app2 = new Vue({
            el: '#app2',
            methods: {
                say: function (message) {
                    alert(message)
                }
            }
        });
        /*
        * Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，
        * 如：event.preventDefault() 或 event.stopPropagation()。
          Vue.js通过由点(.)表示的指令后缀来调用修饰符。*/
        var app3 = new Vue({
            el:'#app3',
            data:{

            },
            methods:{
                doThis:function () {
                    // alert('doThis');
                    console.log("doThis")
                },
                submit:function (even) {
                    alert("按键13 enter")
                },
                doThat:function (even) {
                    alert("doThat")
                }
            }
        });

        /*computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，
        而 methods 内的方法则不会；
        例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法：*/
        var app4 = new Vue({
            el: '#app4',
            data: {
                name: 'Vue.js'
            },
            // 在 `methods` 对象中定义方法

            //如果定义了computed中的name1  初始化时会自动执行一遍 name1
            //如果同时methods computed name1的方法 则会执行methods name1方法
            computed: {
                name1: function(){  alert('222') },
                greet: function (event) {
                    // `this` 在方法里指当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            },
            methods:{
                name1:function () {
                    alert("methods:name1")
                }


            }
        });
        // 也可以用 JavaScript 直接调用方法



        var app5 = new Vue({
            el:'#app5',
            //当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：
            methods:{
                say:function(message,e){
                    alert(message);
                    console.log(e.currentTarget);
                }
            }
        })



        var app6 = new Vue({
            el: '#app6',
            data: {
                m:0
            },

            methods:{
                add:function(e){
                    e.stopPropagation();
                    this.m +=2;
                },

                add2:function(m,n){
                    this.m=m+n;
                }
            }

        })

    </script>





</body>
</html>